<template>
    <div>
        <div class="love">
            <h2 class="nxh">猜你喜欢</h2>
            <div class="like">
                <div :class="{active: currentIndex0 == index }" @click="handleClick(index),sortClick(index)" v-for="(item,index) in list" :key="index">{{item}}</div>
            </div>
            <div class="Lable">
                <div class="box" v-for="(item,index) in LableArr" :key="index">{{item}}</div>
            </div>
            <div class="store">
                <div class="store_1" v-for="(item,index) in storeArr" :key="index"  @click="toDetail(item)">
                    <div class="imgbox">
                        <img :src="item.picUrl" alt="" width="90px" height="90px">
                    </div>
                    <div class="text">
                        <span class="name">{{item.name}}</span>
                        <br>
                        <span class="score">★{{item.wmPoiScore /10}}</span>
                        <span class="month">{{item.monthSalesTip}}</span>
                        <br>
                        <span class="start">{{item.minPriceTip}}</span>
                        <span class="fee">{{item.shippingFeeTip}}</span>
                        <span class="time">{{item.deliveryTimeTip}}</span>
                        <span class="km">{{item.distance}}</span>
                        <br>
                        <ul>
                            <li class="info" v-for="(item,index) in item.discounts2" :key="index">{{item.info}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import axios from 'axios'
import { shop_list } from "../utils/api";

export default {
    data(){
        return {
            currentIndex0: 0,
            list:[
            '综合排序', '距离最近', '销量最高', '筛选'
            ],
            LableArr:['年货节热卖','津贴联盟','满减优惠','品质联盟'],
            storeArr: [],
        }
    },
    methods:{
        handleClick(index) {
            this.currentIndex0 = index;
        },
        sortClick(index){
            if(index == 0){
                this.storeArr.sort((a,b)=>{
                    return a.wmPoiScore - b.wmPoiScore;
                })
            }else if(index == 1) {
                this.storeArr.sort((a,b)=>{
                    return (
                        parseInt(b.distance.slice(2))-parseInt(a.distance.slice(2))
                    )
                });
            }else if(index == 2){
                this.storeArr.sort((a, b) => {
                    return (
                        parseInt(b.monthSalesTip.slice(2))-parseInt(a.monthSalesTip.slice(2))
                    );
                });
            }else if(index == 3) {
                this.storeArr.sort((a,b)=>{
                    return(
                        parseInt(b.deliveryTimeTip.slice(0,2))-parseInt(a.deliveryTimeTip.slice(0,2))
                    )
                });
            }
        },
        toDetail(item){
            // this.$router.push('/detail'+item.mtWmPoiId);
            this.$router.push('/detail/'+item.mtWmPoiId);
        }
    },
    mounted(){
        // axios.get('/api/shop/list').then((res)=>{
        //     this.storeArr = res.data.list;
        //     console.log(res.data.list);
        // })
        shop_list().then((res)=>{
            // console.log(res.data.list);
            this.storeArr = res.data.list;
        })
    }
}
</script>

<style lang="scss" scoped>
.love{
    background-color: #fff;
    padding-bottom: 50px;
}
// 主页
.love .nxh{
    margin-left: 15px;
    margin-bottom: 10px;
}
.love .like {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.love .like div.active {
    font-weight: bolder;
    color: red;
}
.love .Lable {
    width: 94%;
    margin: auto;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

.love .Lable .box {
    background-color: #f5f5f5;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 5px;
}
// 商品列表
.store_1{
    display: flex;
}
.store_1:nth-child(1){
    margin-top: 10px;
}
.store_1 .imgbox{
    width: 90px;
    margin:5px 10px 5px 15px;
    border: 1px solid #f5f5f5;
    border-radius: 5px;
}
.store_1 .imgbox img{
    width: 90px;
    // height: 90px;
    border-radius: 5px;
}
.store_1 .text {
    margin-top: 3px;
}
.store_1 .text .name {
    font-size: 16px;
    font-weight: bolder;
}
.store_1 .text .score {
    margin-top: 5px;
    display: inline-block;
    color:orangered;
    font-size: 13px;
}
.store_1 .text .month {
    font-size: 13px;
    color: #999;
    display: inline-block;
    margin-left: 5px;
}
.store_1 .text .start{
    font-size: 13px;
    color: #999;
    display: inline-block;
}
.store_1 .text .fee{
    font-size: 13px;
    color: #999;
    display: inline-block;
    margin-left: 5px ;
}
.store_1 .text .time{
    font-size: 13px;
    color: #999;
    display: inline-block;
    margin-left: 50px;
}
.store_1 .text .km{
    font-size: 13px;
    color: #999;
    display: inline-block;
    margin-left: 5px;
}
ul {
    list-style: none;
    margin-top: 5px;
    // margin-left: 100px;
}
li {
    font-size: 12px;
    float: left;
    text-align: center;
    height: 20px;
    border: 1px solid orangered;
    color: orangered;
    margin-left: 5px;
    margin-top: 5px;
    line-height: 20px;
    border-radius: 4px;
    white-space: nowrap;
}
</style>